<script>
import statsMixin from '../../mixins/statsMixin.js'

export default {
  name: 'ViewsCard',
  mixins: [statsMixin],
  methods: {
    // 覆盖混入中的同名方法，演示合并策略：组件优先
    formatNumber(n) {
      if (n >= 10000) return (n / 10000).toFixed(1) + '万'
      return String(n)
    }
  }
}
</script>

<template>
  <div class="card secondary">
    <h3>{{ title }}（浏览卡片：覆盖 formatNumber）</h3>
    <p>点赞：{{ formatNumber(likes) }} · 浏览：{{ formatNumber(views) }}</p>
    <p>综合分：{{ popularityScore }} · 运行 {{ ageSeconds }}s</p>
    <div class="actions">
      <button class="btn" @click="incrementLike">点赞 +1</button>
      <button class="btn" @click="incrementView">浏览 +1</button>
    </div>
  </div>
</template>

<style scoped>
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.secondary {
  border-color: #c4b5fd;
}
.actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.btn {
  background-color: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.btn:hover { background-color: #6d28d9; }
</style>